<template>
  
     <el-dialog 
            title="设置学校经纬度"
            :visible.sync="dialogVisible"
            @opened='opened'
            :before-close="close"
            width="50%" >
            <div class="map-p">
                <div class="search-p">
                    <input id="tipinput" class="search-input" v-model="placeName" placeholder="请输入地址" />
                </div>
                <div id="container" style="height:500px;"></div>
            </div>

            <span slot="footer" class="dialog-footer">    
                <el-button type="primary" @click='comfirm' >确 定</el-button>
            </span>
         </el-dialog>
   
</template>
<script>
export default {
    name: 'teamMap',
    props: {
        dialogVisible: {
            type: Boolean,
            default: false
        },
        lng: [String, Number],
        lat: [String, Number]
    },
    watch: {
        lng () {

        }
    },
    data () {
        return {
             map: null,
             marker: '',
             placeName: '',
             lnglat: '',
            
             address: ''
        }
    },
    methods: {
        close () {
            this.$emit('close')
        },
        addMarker (lnglat) {
            if (this.marker) {
                 this.map.remove(this.marker)
            }
             /* eslint-disable no-undef */
            this.marker = new AMap.Marker({
                position: lnglat
            })
            //  this.map.clearMap()
             this.map.add(this.marker)
             
           this.map.panTo(lnglat)

            this.lnglat = lnglat

            var geocoder = new AMap.Geocoder({
                radius: 100000
            })
            var self = this
             geocoder.getAddress(lnglat, (status, result) => {
                 this.address = ''
                if (status === 'complete' && result.regeocode) {
                      this.address = result.regeocode.formattedAddress
                } else {
                      this.address = '根据经纬度查询地址失败'
                }

                var dom = document.createElement('div')
                dom.style.background = '#fff'
                dom.style.padding = '5px'
                dom.style.boxShadow = '0 0 10px 0 rgba(0,0,0,0.8)'
                dom.innerHTML = this.address
                let infoWindow = new AMap.InfoWindow({
                   // content: self.$store.state.team.address,
                    isCustom: true,
                   content: dom,
                    offset: new AMap.Pixel(2, -35)
                })
                infoWindow.open(self.map, [lnglat.lng, lnglat.lat])
            })
        },
        init () {
            console.log('init...')
          
            var self = this
            /* eslint-disable no-undef */
            var map = new AMap.Map('container', {
                zoom: 11,
                  viewMode: '3D',
                center: [119.306582, 26.08332]
            
            })

            self.map = map
            var autoOptions = {
                input: 'tipinput'
            }
            var auto = new AMap.Autocomplete(autoOptions)
            var placeSearch = new AMap.PlaceSearch({
                map: map
            })
            placeSearch.on('markerClick', function (e) {
                console.log(e)
                lnglat = e.event.lnglat
                self.addMarker(lnglat)
            })
            AMap.event.addListener(auto, 'select', select)
            function select (e) {
                placeSearch.setCity(e.poi.adcode)
                placeSearch.search(e.poi.name)
            }
            map.on('click', function (e) {
                self.addMarker(e.lnglat)
            })

            if (this.lng) {
                var lnglat = new AMap.LngLat(this.lng, this.lat)
                this.addMarker(lnglat)
            } 
        },
        opened () {
            this.init()
        },
        comfirm () {
            this.$emit('comfirm', {
                 lng: this.lnglat.lng,
                lat: this.lnglat.lat,
                address: this.address
            })
            this.close()
        }
    },
    mounted () {
       
    }
}
</script>
<style scoped>
.map-p{
    position: relative;
}
.search-p{
    position: absolute;
    top: 10px;
    left: 10px;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.6);
    z-index: 10;
    padding: 5px 10px;
    background: #fff;
}
.search-input{
    font-size: 16px;
    padding: 5px;
}

</style>
<style >
.amap-sug-result{
    z-index: 4000;
}
</style>
